<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8"/>
    <title>用户管理</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 p-6">
<h1 class="text-2xl font-bold text-indigo-700 mb-6">用户管理</h1>

<!-- 用户表格 -->
<div class="overflow-x-auto bg-white shadow rounded-lg">
    <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-indigo-50">
        <tr>
            <th class="px-4 py-2 text-left text-sm font-medium text-indigo-700">id</th>
            <th class="px-4 py-2 text-left text-sm font-medium text-indigo-700">姓名</th>
            <th class="px-4 py-2 text-left text-sm font-medium text-indigo-700">用户名</th>
            <th class="px-4 py-2 text-left text-sm font-medium text-indigo-700">密码（加密）</th>
            <th class="px-4 py-2 text-left text-sm font-medium text-indigo-700">用户类型</th>
            <th class="px-4 py-2 text-left text-sm font-medium text-indigo-700">email</th>
            <th class="px-4 py-2 text-left text-sm font-medium text-indigo-700">电话</th>
            <th class="px-4 py-2 text-left text-sm font-medium text-indigo-700">操作</th>
        </tr>
        </thead>
        <tbody class="divide-y divide-gray-100">
        {% for user in users %}
            <tr class="hover:bg-gray-50">
                <td class="px-4 py-2 text-sm text-gray-800 max-w-[12rem] truncate overflow-hidden whitespace-nowrap">{{ forloop.counter }}</td>
                <td class="px-4 py-2 text-sm text-gray-800 max-w-[12rem] truncate overflow-hidden whitespace-nowrap">{{ user.name }}</td>
                <td class="px-4 py-2 text-sm text-gray-800 max-w-[12rem] truncate overflow-hidden whitespace-nowrap">{{ user.username }}</td>
                <td class="px-4 py-2 text-sm text-gray-800 max-w-[12rem] truncate overflow-hidden whitespace-nowrap">{{ user.password }}</td>
                <td class="px-4 py-2 text-sm text-gray-800 max-w-[12rem] truncate overflow-hidden whitespace-nowrap">
                    {% if user.type_user == "1" %}
                    用户
                    {% else %}
                    管理员
                    {% endif %}
                </td>
                <td class="px-4 py-2 text-sm text-gray-800 max-w-[12rem] truncate overflow-hidden whitespace-nowrap">{{ user.email }}</td>
                <td class="px-4 py-2 text-sm text-gray-800 max-w-[12rem] truncate overflow-hidden whitespace-nowrap">{{ user.phone }}</td>
                <td class="px-4 py-2 text-sm text-blue-600">
                    <button onclick="openEditModal('{{ user.name }}', '{{ user.username }}', '{{ user.password }}', '{{ user.type_user }}', '{{ user.email }}', '{{ user.phone }}')"
                            class="text-indigo-600 hover:text-indigo-900">编辑
                    </button>
                </td>
            </tr>
        {% empty %}
            <tr>
                <td colspan="8" class="px-4 py-4 text-center text-gray-400">暂无用户数据</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>

</div>

<!-- 编辑用户模态框 -->
<div id="editModal" class="fixed inset-0 bg-black bg-opacity-30 hidden flex items-center justify-center">
    <div class="bg-white p-6 rounded-xl shadow-xl w-full max-w-md space-y-4">
        <h2 class="text-xl font-bold text-indigo-700">编辑用户</h2>
        <form method="post" action="{% url 'user_manage' %}" class="space-y-4">

            <input type="hidden" id="editId" name="id"/>
            <div>
                <label class="block text-sm font-medium text-gray-700">姓名</label>
                <input type="text" id="editName" name="name"
                       class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"/>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">用户名</label>
                <input type="text" id="editUsername" name="username"
                       class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500" disabled/>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">密码</label>
                <input type="password" id="editPwd" name="pwd"
                       class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"/>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">用户类型</label>
                <select id="editType" name="type_user"
                        class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
                    <option value="1">普通用户</option>
                    <option value="0">管理员</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">email</label>
                <input type="email" id="editEmail" name="email"
                       class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"/>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">电话</label>
                <input type="text" id="editPhone" name="phone"
                       class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"/>
            </div>
            <div class="flex justify-end space-x-2">
                <button type="button" onclick="closeEditModal()"
                        class="px-4 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300">取消
                </button>
                <button type="submit"
                        class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700">保存
                </button>
            </div>
        </form>
    </div>
</div>

{% load static %}
<script src="{% static 'script/user_manage.js' %}">
    
</script>
</body>
</html>